<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS --><!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
        <link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    -->
</head>
<body>
<header class="navbar clearfix" id="header"></header>
<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">
            <!-- SIDEBAR MENU -->
            <ul></ul>
        </div>
    </div>
    <!-- /SIDEBAR -->
    <div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">新增任务</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="line-height: 34px;vertical-align: middle;">任务类型：</label>
                        <div class="col-sm-4">
                            <select id="quartzJob_select" class="col-md-12" tabindex="-1">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>任务名称：</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="jobName" maxlength="20"/>
                            <input type="hidden" name="id"/>
                        </div>
                    </div>
                    <div class="form-group cron-date">
                        <label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>执行日期：</label>
                        <div class="col-md-8">
                            <input class="Wdate" style="height:34px" type="text" name="executeDate"
                                   onfocus="WdatePicker({minDate:'%y-%M-%d %H:%m:%s',dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})">
                        </div>
                    </div>

                    <div class="param_bottom">
                        <div class="col-md-10">
                            <table class="table table-bordered">
                                <thead>
                                <th style="width:30%">key</th>
                                <th style="width:30%">value</th>
                                <th style="width:10%">操作</th>
                                </thead>
                                <tbody id="param_tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- <div class="form-group">
                        <label class="control-label col-md-3" style="line-height:34px"><span class="required">*</span>任务分组：</label>
                        <div class="col-md-8">
                            <select id="edit_job_select" name="jobGroup" class="col-md-12 select2-offscreen" tabindex="-1">
                                <option value=-1>选择分组</option>
                                <option value="Balance">Balance</option>
                            </select>
                        </div>
                    </div> -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-add-param">添加</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success bt-save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div id="main-content">
        <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header"></div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- FORMS QUERY-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box border primary">
                                        <div class="box-title">
                                            <h4><i class="fa fa-bars"></i>查询条件</h4>
                                        </div>
                                        <div class="box-body big" style="padding:10px;">
                                            <form class="form-horizontal" role="form" id="form_Job">
                                                <div class="form-group mrg-bt10">
                                                    <label class="col-sm-1 control-label" style="width: auto">任务名称：</label>
                                                    <div class="col-sm-2">
                                                        <input type="text" class="form-control" name="q" placeholder="输入关键字"/>
                                                    </div>
                                                    <label class="col-sm-1 control-label" for="e1" style="width: 108px">任务分组：</label>
                                                    <div class="col-sm-2">
                                                        <select id="job_select" name="jobGroup" class="col-md-12 select2-offscreen" tabindex="-1">
                                                        </select>
                                                    </div>
                                                    <label class="col-sm-1 control-label" style="width: auto">创建日期：</label>
                                                    <div class="col-sm-2" style="display:inline-flex;margin-left:-10px">
                                                        <div class="float-left" style="width:130px">
                                                            <input type="text" name="startDate" class="form-control bootstrap-datepicker"/>
                                                        </div>
                                                        <div style="width: 20px;text-align: center;">至</div>
                                                        <div class="float-left" style="width:130px">
                                                            <input type="text" name="endDate" class="form-control bootstrap-datepicker"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2" style="width: 120px">
                                                        <input type="checkbox" name="fromQuartz"><span style='margin-left:10px'>容器内查询</span>
                                                    </div>
                                                    <div class="col-sm-1">
                                                        <a class="btn btn-primary search">查询</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /FORMS QUERY -->
                    <div class="row" style="height: 30px;">
                        <div class="col-md-12">
                            <div class="box ">
                                <a href="javaScript:;" class="btn btn-success btn-add">
                                    <i class="fa fa-plus-square-o"></i> 新增任务
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- TABLES -->
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4><i class="fa fa-table"></i>任务数：<span id="total"></span>条 </h4>

                                </div>
                                <div class="box-body">
                                    <table id="db_Job_list" style="table-layout:fixed;word-break:break-all;word-wrap:break-word"
                                           cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
                                    </table>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <!-- /TABLES -->
                    <div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
                    </div>
                </div><!-- /CONTENT-->
            </div>
        </div>
    </div>
    <table>
        <tr class="param_tr_clone param_tr none">
            <td>
                <input type="text" name='key' class="form-control skuId" placeholder="请输入参数名">
            </td>
            <td>
                <input type="text" name="value" class="form-control splitQuantity" placeholder="请输入参数值">
            </td>
            <td>
                <span class="btn btn-danger btn-delete-param">删除</span>
            </td>
        </tr>
    </table>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- WdatePicker -->
<script language="javascript" type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>
    var Job = function () {
        var $mainDataTable = null;
        var searchJob = function () {
            var prop = $("[name=fromQuartz]").prop("checked");
            var q = $("input[name=q]").val();
            var groupName = $("#job_select").val();
            console.log(groupName)
            var url;
            if (prop) {
                url = App.getContextPath() + "admin/job/getJobFromQuartz.do?jobName=" + q;
            } else {
                var startDate = $("input[name=startDate]").val();
                var endDate = $("input[name=endDate]").val();
                url = App.getContextPath() + "admin/job/searchJob.do?q=" + q;

                if (q == "") {
                    if (startDate != "")
                        url += "&startDate=" + startDate;
                    if (endDate != "")
                        url += "&endDate=" + $.dateAdd(endDate);
                }
            }
            if (groupName != '' && groupName != null) {
                url += "&groupName=" + groupName
            }

            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 25,
                "bSort": false,
                "aoColumns": [

                    {
                        "mDataProp": "jobName",
                        "sTitle": "任务名称",
                        "width": "9%"
                    },
                    {
                        "mDataProp": "jobGroup",
                        "sTitle": "任务分组",
                        "width": "9%"
                    },
                    {
                        "mDataProp": "jobStatus",
                        "sTitle": "任务状态",
                        "width": "9%"
                    },
                    {
                        "mDataProp": "jobNum",
                        "sTitle": "执行次数",
                        "width": "9%"
                    },
                    {
                        "mDataProp": "cron",
                        "sTitle": "执行日期",
                        "width": "9%",
                        "render": function (data, type, row) {
                            return $.getLocalTime(row.cronDate);
                        }
                    },
                    {
                        "mDataProp": "createTime",
                        "sTitle": "创建日期",
                        "width": "9%",
                        "render": function (data, type, row) {
                            return $.getLocalTime(row.createTime);
                        }
                    },
                    {
                        "sTitle": "操作",
                        "width": "15%",
                        "render": function (data, type, row) {
                            var str = '<a class="btn btn-warning btn-edit btn-width" style="width: 94px;height: 38px;line-height: 22px;" data="' + JSON.stringify(row).replace(/"/g, '&quot;') + '" href="javascript:;"><i class="fa fa-arrow-circle-o-up"></i>&nbsp;编辑任务</a>';
                            str += '<a class="btn btn-warning btn-del btn-width" style="width: 94px;height: 38px;line-height: 22px;" data="' + JSON.stringify(row).replace(/"/g, '&quot;') + '" href="javascript:;"><i class="fa fa-arrow-circle-o-up"></i>&nbsp;删除任务</a>';
                            return str;
                        }
                    }
                ]

            });
            $mainDataTable = $("#db_Job_list").dataTable(dtSetting);
        };
        var addJob = function () {

            $.clearInput();
            $("#box-config").modal("show");
            $("#box-config .modal-title").html('新增任务');
            $("#box-config input[name='jobName']").removeAttr('readonly');
            // $("#box-config .cron-date").hide();
        }
        var editJob = function () {
            var row = eval("(" + $(this).attr('data') + ")");
            $.clearInput();
            $("#box-config").modal("show");
            $("#box-config .modal-title").html('编辑任务');
            $("#box-config input[name='jobName']").attr('readonly', 'readonly');
            $("#box-config input[name='id']").val(row.id);
            $("#quartzJob_select").select2().val(row.jobGroup);
            $("#box-config input[name='jobName']").val(row.jobName.substring(row.jobName.indexOf("_") + 1));
            $("#box-config input[name='executeDate']").val(new Date(row.cronDate).format("yyyy-MM-dd hh:mm:ss"));

            for (k in row.dataMap) {
                $("#param_tr_clone").find("input").val("");
                var copyDom = $('.param_tr_clone').clone().removeClass('none').removeClass('param_tr_clone');
                var obj = {}
                obj.key = k;
                obj.value = row.dataMap[k];
                copyDom.find('input[name=key]').val(obj.key)
                copyDom.find('input[name=value]').val(obj.value)
                paramArray.push(obj)
                $('#param_tbody').append(copyDom)
                console.log(copyDom)
            }
        }
        var delJob = function () {
            var row = eval("(" + $(this).attr('data') + ")");
            $.confirm("你确认需要同步订单吗?", function () {
                var jobName = row.jobName;
                var jobGroup = row.jobGroup;
                url = App.getContextPath() + 'admin/job/deleteJob.do';
                $.ajax({
                    url: url,
                    async: true,
                    data: {
                        jobName: jobName,
                        jobGroup: jobGroup
                    },
                    success: function (result) {
                        if (result.type == 'success') {
                            searchJob();
                        } else {
                            $.alert('请稍后重试');
                        }
                    }
                });
            })
        }
        var getAllQuartzJob = function () {
            $.ajax({
                type: "get",
                url: App.getContextPath() + "admin/job/getAllQuartzJob.do",
                data: {},
                async: true,
                success: function (result) {
                    var data = result.extra.jobType;
                    var str = ''
                    str += "<option value=''>" + '请选择' + "</option>"
                    for (let index = 0, length = data.length; index < length; index++) {
                        const element = data[index];
                        str += "<option value=" + element + ">" + element + "</option>"
                    }
                    $("#quartzJob_select").append(str)
                    $("#quartzJob_select").select2();
                    var groupData = result.extra.groupList;
                    var groupStr = ''
                    groupStr += "<option value=''>" + '请选择' + "</option>"
                    for (let index = 0, length = groupData.length; index < length; index++) {
                        const element = groupData[index];
                        groupStr += "<option value=" + element + ">" + element + "</option>"
                    }
                    $("#job_select").append(groupStr)
                    $("#job_select").select2();
                }
            });
        }
        var saveJob = function () {
            var jobName = $("#box-config input[name='jobName']").val();
            var job = $("#quartzJob_select").val();
            var executeDate = $("#box-config input[name='executeDate']").val();

            if (job == null || job == '') {
                $.alert('请选择任务类型');
                return false;
            }
            if (executeDate == null || executeDate == '') {
                $.alert('请选择执行日期');
                return false;
            }
            var quartzJob = {};
            quartzJob.job = job;
            quartzJob.name = jobName;
            quartzJob.executeTime = executeDate;

            var paramMap = new Map();

            paramArray.forEach(function (param) {
                console.log(param)
                if (param.key == null || param.key === '' || param.value == null || param.value === '') {
                    $.alert("输入参数有误");
                    return;
                }
                paramMap.set(param.key, param.value);
            });
            quartzJob.param = mapConverteObj(paramMap);

            console.log(quartzJob);
            console.log(JSON.stringify(quartzJob));
            var url = App.getContextPath() + 'admin/job/saveJob1.do';
            $.ajax({
                type: 'post',
                url: url,
                async: true,
                contentType: 'application/json',
                // data: quartzJob,
                data: JSON.stringify(quartzJob),
                success: function (result) {
                    if (result.type === 'success') {
                        searchJob();
                        $("#box-config").modal("hide");
                    } else {
                        $.alert('请稍后重试');
                    }
                }
            });
        }
        var mapConverteObj = function (map) {
            //Map转为Json的方法
            var obj = Object.create(null);
            for (var [k, v] of map) {
                obj[k] = v;
            }
            return obj;
        }


        var paramArray = [];
        var addParam = function () {
            if (paramArray.length) { // 有数据的时候判断最后一条是否填写完成!
                var last = paramArray[paramArray.length - 1]
                if (!last.key || !last.value) {
                    $.alert('请把数据填写完整在添加!')
                    return false
                }
            }
            var copyDom = $('.param_tr_clone').clone().removeClass('none').removeClass('param_tr_clone');
            var obj = {
                key: null,
                value: null
            }
            copyDom.find('input[name=key]').val(obj.key)
            copyDom.find('input[name=value]').val(obj.value)
            paramArray.push(obj)
            $('#param_tbody').append(copyDom)
        }
        var delPram = function () {
            var $tr = $(this).closest('tr');
            var index = $tr.index();
            paramArray.splice(index, 1);
            $tr.remove()
        }
        return {
            init: function () {
                $.initDate($("#form_Job"), 0, 0);
                getAllQuartzJob();
                $(".search").click(searchJob);
                searchJob();
                $(".btn-add").click(addJob);
                $(".bt-save").click(saveJob);
                $("#db_Job_list").on('click', '.btn-edit', editJob);
                $("#db_Job_list").on('click', '.btn-del', delJob);
                // 编辑数据
                $('body').on('keyup', '.param_tr input', function (e) {
                    var $this = $(this)
                    var name = $this.attr('name')
                    var index = $(this).closest('tr').index();
                    paramArray[index][name] = $this.val()
                });
                // 添加一行数据
                $('body').on('click', '.btn-add-param', addParam)
                // 删除数据
                $('body').on('click', '.btn-delete-param', delPram)


            }
        }
    }();
    $(function () {
        $("#header").load("../head.html");
        App.init(); //Initialise plugins and elements
        Job.init();
    });
</script>
<!-- /JAVASCRIPTS -->
</body>
</html>